﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>实时数据</title>
    <link rel="shortcut icon" href="./resources/pc/img/favicon.ico">
    <link href="./resources/pc/libs/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="./resources/pc/css/style.css" rel="stylesheet">
    <script src="./resources/pc/libs/jquery-1.11.0.min.js"></script>
    <script src="./resources/pc/libs/bootstrap/bootstrap.min.js"></script>
    <script src="./resources/pc/libs/mqttws31.js"></script>
    <script>

        $(document).ready(function () {
            $("#btn_con").click(function () {
                //注意不要在client前写var
                client = new Paho.MQTT.Client("www.yyjsx.xyz", Number(61613), "chrome");//建立客户端实例
                // set callback handlers
                client.onConnectionLost = onConnectionLost;
                client.onMessageArrived = onMessageArrived;
                client.connect({onSuccess: onConnect});
                function onConnect() {
                    // Once a connection has been made, make a subscription and send a message.
                    console.log("onConnect");
                    client.subscribe("World");
                    message = new Paho.MQTT.Message("Hello");
                    message.destinationName = "World";
                    client.send(message);
                }
                function onConnectionLost(responseObject) {
                    if (responseObject.errorCode !== 0) {
                        console.log("onConnectionLost:" + responseObject.errorMessage);
                    }
                }
                function onMessageArrived(message) {
                    console.log("onMessageArrived:" + message.payloadString);
                }
            });
        });
    </script>
    <style>
        .input-group-addon {
            width: 100px;
        }

        .input-group[class*="col-"] {
            float: left;
            padding-left: 10px;
            margin-top: 10px;
        }

        .btn-group {
            padding-left: 10px;
            margin-top: 10px;
        }

        #input_rmsg {
            resize: vertical;
        }

        table th, table td {
            text-align: center;
        }

        table tr td:nth-child(2) {
            max-width: 400px;
            word-break: break-all;
        }

        .filter ul {
            list-style: none;
            margin: 0 0 0 -20px;
            padding: 0;
        }

        .filter li {
            background: url(resources/pc/img/line.png) no-repeat left 35%;
            padding: 0 0 12px 20px;
            cursor: pointer;
            white-space: nowrap;
        }
    </style>
</head>
<body>
<!--页头-->
<div class="header">
    <div class="container">
        <div class="row">
            <div class="col-md-5"><h1>欢迎进入API测试页面！</h1></div>
            <div class="col-md-7">
                <ul id="nav" class="nav nav-pills">
                    <li><a href="index.html">首页</a></li>
                    <li class="active"><a class="link_i" href="#" vhref="rtconnect.html">实时数据</a></li>
                    <li><a class="link_i" href="#" vhref="sensor_history.html">历史数据</a></li>
                    <li><a class="link_i" href="#" vhref="network_topology.html">网络拓扑</a></li>
                    <li><a class="link_i" href="#" vhref="ipCamera.html">视频监控</a></li>
                    <li><a class="link_i" href="#" vhref="property.html">用户数据</a></li>
                    <li><a class="link_i" href="#" vhref="autoctrl.html">自动控制</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--页头-->
<!--页中-->
<div class="content">
    <div class="container">
        <h3 class="text-center">实时数据测试工具</h3>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="panel panel-default">

                    <div class="panel-heading">
                        <h3 class="panel-title">配置服务器地址</h3>
                    </div>

                    <div class="panel-body">
                        <form onsubmit="javascript:return false" action="">
                            <div class="input-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                <span class="input-group-addon">应用ID</span>
                                <input type="text" id="input_aid" class="form-control" pattern="^[0-9]*$"
                                       title="请输入有效数字ID" value=""/>
                            </div>
                            <div class="input-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                <span class="input-group-addon">密钥</span>
                                <input type="text" id="input_xkey" class="form-control" pattern="^[a-zA-Z0-9]+$"
                                       title="请输入有效密钥" value=""/>
                            </div>
                            <div class="input-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                <span class="input-group-addon">服务器地址</span>
                                <input type="text" id="input_saddr" class="form-control" value="zhiyun360.com:28080"/>
                            </div>
                            <div class="btn-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                <input type="button" id="btn_con" class="btn btn-success" value="链接"/>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">数据推送与接收</h3>
                    </div>
                    <div class="panel-body">
                        <div class="input-group col-xs-12 col-sm-6 col-md-4 col-lg-4">
                            <span class="input-group-addon">地址</span>
                            <input type="text" id="input_send_addr" class="form-control" value=""/>
                        </div>
                        <div class="input-group col-xs-12 col-sm-6 col-md-4 col-lg-4">
                            <span class="input-group-addon">数据</span>
                            <input type="text" id="input_send_msg" class="form-control" value=""/>
                        </div>
                        <div class="btn-group col-xs-12 col-sm-6 col-md-4 col-lg-4">
                            <input type="button" id="btn_send" class="btn btn-default" value="发送"/>
                        </div>
                        <div class="btn-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <div class="btn-group filter col-xs-4 col-sm-4 col-md-3 col-lg-3">
                                <div style="margin-top: 5px;">
                                    <span class="title">数据过滤</span>
                                    <div class="btn-group btn-group-xs" style="margin-top: 0px;">
                                        <button type="button" class="btn btn-default" onclick="allData()">所有数据</button>
                                        <button type="button" class="btn btn-default" onclick="clearData()">清空空数据
                                        </button>
                                    </div>
                                </div>
                                <ul mac="all">
                                </ul>
                            </div>

                            <div class="btn-group col-xs-8 col-sm-8 col-md-9 col-lg-9">
                                <table class="table table-condensed" id="mac-table">
                                    <thead>
                                    <tr>
                                        <th>MAC地址</th>
                                        <th>信息</th>
                                        <th>时间</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--页中-->
<!--页尾-->
<div class="footer">
    <div class="container">
        <p>本站采用多种最新技术，推荐使用Chrome、Firefox、IE10以上版本浏览器<br>智云物联 版权所有 鄂ICP备13015866号-1<br>© 2013 - PowerBy Zonesion</p>
    </div>
</div>
<!--页尾-->
</body>
</html>
